<template>
  <div class="chart-content-wrapper" @mouseenter="mouseenter()" @mouseleave="mouseleave">
    <top-filter :title="reportName" ref="topFilter">
      <single-list-filter-without-cb :filter="filterN" :type="'years'"
                                     @confirmSingleSelect="chooseYear">
      </single-list-filter-without-cb>
      <double-check-filter :isParentLinkChild="true" @confirmDoubleSelect="planAreaSelect" defaultText="统筹区" :filter="filterN" type="planArea"></double-check-filter>
      <single-list-filter @confirmSingleSelect="hospLevelSelect" :isParentLinkChild="true" defaultText="医院等级" :filter="filterN" type="hospLevel"></single-list-filter>
      <single-list-filter-without-cb :defaultText="'医疗类别'" :filter="filterN" :type="'insuredType'" @confirmSingleSelect="confirmSingleSelect"></single-list-filter-without-cb>
    </top-filter>
    <div class="chart-container" v-show="isShowChart">
      <div id="myChart6" class="chart-type1"  style="height:82.5%"></div>
      <Summarize :showSummarizeText="conclusion"></Summarize>
    </div>
  </div>
</template>

<script>
  import {formatFunc} from '../../common/mixin.js'
  import {setChartHeight,loadingOpt} from '../../../assets/js/utils.js'
  import {getChartItem6} from "../../../api/api";
  import SingleListFilter from '../../last/filter/single-list-filter.vue'
  import DoubleCheckFilter from '../../last/filter/double-check-filter.vue'
  import TopFilter from '../../last/filter/top-filter1.vue'
  import Summarize from '../../last/summarize/summarize.vue'
  import SingleListFilterWithoutCb from '../../last/filter/single-list-filter-without-checkbox'
  export default {
    name: 'chart6',
    props:['isChange','filter'],
    components:{
      SingleListFilter,
      DoubleCheckFilter,
      TopFilter,
      Summarize,
      SingleListFilterWithoutCb
    },
    data () {
      return {
        filterN: JSON.parse(JSON.stringify(this.filter)),
        conclusion:'',
        year:this.filter.years[0],
        planAreaId:null,
        hospitalId:this.filter.nc.hospitalRankType[1].selectId,
        insuredTypeId:null,
        reportName:'参保患者个人支出比例分解分析',
        isShowChart:true,
        height:400
      }
    },
    mounted(){
      let areaCode = []
      this.filter.nc.planArea.map((item,index)=>{
        if(index>0&&index<=6){
          areaCode.push(item.selectId)
        }
      })
      this.planAreaId = areaCode.join(',');
      setChartHeight();
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById('myChart6') ,null, {renderer: 'canvas'});
      this.getData();
      let that = this;
      this.myChart.on('legendselectchanged',function(params){
        let option = this.getOption();
        let select_key = Object.keys(params.selected);
        option.legend.map((item,index)=>{
          select_key.map(res => {
            item.selected[res] = true;
          });
        })
        let legend = []
        that.myChart.dispatchAction({
          type: 'legendselectchanged',
          batch: legend
        });
        that.myChart.setOption(option)
      })
    },
    watch:{
      isChange(){
        setTimeout(()=>{
          setChartHeight();
          setTimeout(()=>{
            this.myChart.resize();
          },10)
        },101)
      }
    },
    methods:{
      mouseenter(){
        this.$refs.topFilter._hideChartTitle()
      },
      mouseleave() {
        this.$refs.topFilter._showChartTitle()
      },
      getData(){
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          this.myChart.clear();
          this.myChart.showLoading(loadingOpt)
          getChartItem6('report/queryInsuredSelfSpendRatio',this.year,this.planAreaId,this.hospitalId,this.insuredTypeId).then(res=>{
            let json = res.data;
            if(res.code==0){
              this.isShowChart = true;
              this.myChart.hideLoading();
              this.reportName = json.reportName;
              this.conclusion = json.conclusion;
              this.drawPie(json)
            }else{
              this.isShowChart = false;
            }
          }).catch(res=>{
            this.isShowChart = false;
          })
        },300)
      },
      chooseYear(year){
        //选择年份
        this.year = year;
        this.getData();
      },
      planAreaSelect(filter){
        //统筹区
        this.planAreaId = filter.join(',');
        this.getData();
      },
      hospLevelSelect(filter){
        //医院级别
        this.hospitalId = filter.join(',');
        this.getData()
      },
      confirmSingleSelect(filter){
        //医疗类别
        this.insuredTypeId = filter;
        this.getData();
      },
      drawPie(json){
        // 绘制图表
        let proportion = json.allSpendList[0].value/(Number(json.allSpendList[0].value)+Number(json.allSpendList[1].value));//此值为个人支付比例
        let startAngle = 0;
        startAngle = parseInt(360*proportion/2)
        let bigLineP = [{name: '', x: '35%', y: '65%'}, {x: '24%', y: '50%'}];
        let bigLineN = [{name: '', x: '65%', y: '65%'}, {x: '76%', y: '50%'}];
        let smallLine1 =  [{x: '24%', y: '40%'},{x: '24%', y: '50%'}];
        let smallLine2 = [{x: '76%', y: '40%'},{x: '76%', y: '50%'}];
        /*json.allSpendList.map((item,index)=>{
          if(item.value == 0.00){
            item.value = null;
          }
        })
        json.selfSpendList.map((item,index)=>{
          if(item.value == 0.00){
            item.value = null;
          }
        })
        json.planSpendList.map((item,index)=>{
          if(item.value == 0.00){
            item.value = null;
          }
        })*/
        this.myChart.setOption({
          title : {
            show: false,
            subtext: '单位：万元',
            left:'4%',
            x:'left',
            subtextStyle:{
              color:'#fff'
            }
          },
          tooltip : {
           /* trigger: 'item',*/
            textStyle :{
              fontSize:12
            },
            show:true,
            formatter: "{b} :<br/> {c}万元 ({d}%)"
          },
          legend: [{
            left: 'center',
            top:'bottom',
            itemWidth:10,
            itemHeight:10,
            itemGap:30,
            tooltip:{
              show:true,
              formatter:function(params){
                return `${params.name}占比`
              }
            },
            textStyle:{
              color:'#fff'
            },
            data: [{name:json.allSpendList[1].name,icon: 'circle',},{name:json.allSpendList[0].name,icon: 'circle',}],
          },{
            orient: 'vertical',
            left: '4%',
            top:'35%',
            textStyle:{
              color:'#fff'
            },
            tooltip:{
              show:true,
              formatter:function(params){
                return `${params.name}占比`
              }
            },
            /*selectedMode: false,*/
            itemWidth:10,
            itemHeight:10,
            data: [{name:json.planSpendList[0].name,icon: 'circle',},{name:json.planSpendList[1].name,icon: 'circle',},{name:json.planSpendList[2].name,icon: 'circle',}]
          },{
            orient: 'vertical',
            left: '84%',
            top:'35%',
            /*selectedMode: false,*/
            tooltip:{
              show:true,
              formatter:function(params){
                return `${params.name}占比`
              }
            },
            textStyle:{
              color:'#fff'
            },
            itemWidth:10,
            itemHeight:10,
            data: [{name:json.selfSpendList[0].name,icon: 'circle',},{name:json.selfSpendList[1].name,icon: 'circle',}]
          }],
          series : [
            {
              name: '占比',
              type: 'pie',
              radius : '50%',
              center: ['50%', '65%'],
              data: json.allSpendList,
              animation:false,
              startAngle:startAngle,
              hoverAnimation:false,
              tooltip:{
                show:true,
                textStyle :{
                  fontSize:12
                },
                formatter:function(params){
                  let txt = ''
                  if(params.dataIndex == 0){
                    txt = `<span style='color:${params.color};'>${params.name}：${params.value}万元</span></br><span style='color:#c7c7c7'>占比：${params.percent}%</span>`
                  }else{
                    txt = `<span style='color:${params.color};'>${params.name}：${params.value}万元</span></br><span style='color:#c7c7c7'>占比：${params.percent}%</span>`
                  }
                  return txt;
                }
              },
              zlevel:3,
              label:{
                show:true,
                position:'inside',
                formatter:'{d}%',
                fontSize:'14',
                color:'#000'
              },
              itemStyle:{
                color: function(params) {
                  // build a color map as your need.
                  let colorList = ['#ff6a93','#ffd66a'];
                  return colorList[params.dataIndex]
                },
                borderWidth:0
              },
            },{
              name: '统筹基金支付比例占比',
              type: 'pie',
              radius : '30%',
              center: ['25%', '25%'],
              zlevel:2,
              hoverAnimation:false,
              animation:false,
              tooltip:{
                show:true,
                textStyle :{
                  fontSize:12
                },
                formatter:function(params){
                  let txt = `<span style='color:${params.color};'>${params.name}：${params.value}万元</span></br><span style='color:#c7c7c7'>占比：${params.percent}%</span>`
                  return txt;
                }
              },
              markLine:{
                symbol:'none',
                silent: true,//图形是否不响应和触发鼠标事件 默认为 false，即响应和触发鼠标事件。
                lineStyle:{
                  type: 'solid',
                  color: '#ffd66a'
                },
                data: [smallLine1,bigLineP]
              },
              itemStyle:{
                color: function(params) {
                  // build a color map as your need.
                  let colorList = ['#9de5f3','#ffedb2','#ffd66a'];
                  return colorList[params.dataIndex]
                },
                borderWidth:0
              },
              data:json.planSpendList,
              label:{
                show:true,
                position:'inside',
                formatter: formatFunc,
                fontSize:'14',
                color:'#000'
              },
            },{
              name: '个人支付比例占比',
              type: 'pie',
              hoverAnimation:false,
              animation:false,
              radius : '30%',
              center: ['75%', '25%'],
              data:json.selfSpendList,
              zlevel:1,
              tooltip:{
                show:true,
                textStyle :{
                  fontSize:12
                },
                formatter:function(params){
                  let txt = `<span style='color:${params.color};'>${params.name}：${params.value}万元</span></br><span><span style='color:#c7c7c7'>占比：${params.percent}%</span>`
                  return txt;
                }
              },
              itemStyle:{
                color: function(params) {
                  // build a color map as your need.
                  let colorList = ['#ffacc3','#ff6a93'];
                  return colorList[params.dataIndex]
                },
                borderWidth:0.01,
              },
              markLine:{
                symbol:'none',
                silent: true,
                lineStyle:{
                  type: 'solid',
                  color: '#ff6a93'
                },
                data: [smallLine2,bigLineN]
              },
              label:{
                show:true,
                position:'inside',
                formatter: formatFunc,
                fontSize:'14',
                color:'#000'
              },
            }
          ]

        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
